<template>
	<view>
		<NavbarHead :toTop="false" leftTitle="购物车" bgColor="rgba(0,0,0,0)"></NavbarHead>

		<template v-if="cartList.length===0">
			<view class="topBox" :style="{'padding-top':topHeadHeight+ 'rpx' }">
				<image class="emptyBox" src="http://qiniu.suboshimuying.cn/static/cart/Frame 2870@2x.png" mode="">
				</image>
			</view>
		</template>
		<template v-else>
			<view class="topBox" :style="{'padding-top':topHeadHeight+ 'rpx' }">
				<view class="mainBox card">
					<view class="mainBox-left">
						当前已选中&nbsp;{{activeNum}}&nbsp;件
					</view>
					<view class="mainBox-right" @click="btnState= !btnState">
						{{btnState? '管理':'完成'}}
					</view>
				</view>
			</view>
			<view class="goodItem card" v-for="(item,index) in cartList" :key="item.id">
				<image class="change" v-if="item.checkedFlag" src="http://qiniu.suboshimuying.cn/static/cart/check.png"
					@click="itemChange(index)">
				</image>
				<image class="change" v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png"
					@click="itemChange(index)"></image>
				<view class="itemMain"
					@click="toUrl(`/subPages/goodDetails/goodDetails?type=${item.shop_goods.one_category_id}&id=${item.goods_id}`)">
					<image class="itemMain-left" :src="item.shop_goods.thum_image" mode=""></image>
					<view class="itemMain-right">
						<view class="name u-line-1">
							{{item.shop_goods.name}}
						</view>
						<view class="nacPrice">
							某宝参考价：¥{{item.shop_goods.mb_price}}
						</view>
						<view class="nacPrice">
							某宝参考价：¥{{item.shop_goods.md_price}}
						</view>
						<view class="price">
							<view>
								<text style="font-size: 24rpx;">¥</text>
								<text>{{item.shop_goods.price}}</text>
							</view>
							<view class="numberRight">
								<text @click.stop="numClick(0,index,item.id,item.num)">-</text>
								<text>{{item.num}}</text>
								<text @click.stop="numClick(1,index,item.id,item.num)">+</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fixedBox">
				<view class="fixedBox-left" @click="clickCheckAll">
					<image v-if="checkAllState" src="http://qiniu.suboshimuying.cn/static/cart/check.png" mode="">
					</image>
					<image v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png" mode=""></image>
					<text>全选</text>
				</view>
				<view class="fixedBox-center">
					<text style="color: rgba(0,0,0,0.4);font-size: 24rpx;">共计：</text>
					<text>¥{{allPrice}}</text>
				</view>
				<view class="fixedBox-right " :class="{'remove':!btnState}" @click="btnClick">
					{{btnState?'去结算':'移除购物车'}}
				</view>
			</view>
		</template>
		<MessageBox :showFlag="popupShow" @popupClose="popupShow=false" @MesBoxCallback="callback" />
	</view>
</template>

<script>
	import NavbarHead from '../../components/NavbarHead/NavbarHead.vue'
	import MessageBox from '@/components/MessageBox/MessageBox.vue'
	export default {
		data() {
			return {
				topHeadHeight: 172,
				btnState: true, //按钮状态 true结算 flase删除
				cartList: [], // 购物车列表
				popupShow: false, // 确认弹出层
			};
		},
		computed: {
			//监视每个订单选择框状态
			checkAllState() {
				return this.cartList.every(item => item.checkedFlag == true)
			},
			// 总金额
			allPrice() {
				const NP = require('number-precision')
				// NP.plus(num1, num2, num3, ...)   //  num + num2 + num3
				// NP.minus(num1, num2, num3, ...)  // num1 - num2 - num3
				// NP.times(num1, num2, num3, ...)  //  num1 * num2 * num3
				// NP.divide(num1, num2, num3, ...) // num1 / num2 / num3
				let sum = 0
				this.cartList.forEach(item => {
					if (item.checkedFlag) {
						sum = NP.plus(sum, NP.times(item.shop_goods.price * item.num))
					}
				})
				return sum
			},
			// 当前选中件数
			activeNum() {
				let num = 0
				this.cartList.forEach(item => {
					if (item.checkedFlag) {
						// num += item.num
						num++
					}
				})
				return num
			}
		},
		onLoad() {
			this.topHeadHeight = uni.getStorageSync('headHeight') * 2 || 172

		},
		onShow() {
			if(!uni.getStorageSync('token')) return
			this.getCartList()
		},
		components: {
			NavbarHead
		},
		methods: {
			// 跳转
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			// 选中点击
			itemChange(index) {
				this.cartList[index].checkedFlag = !this.cartList[index].checkedFlag
			},
			//全选按钮
			clickCheckAll() {
				if (this.checkAllState) {
					this.cartList.forEach(item => item.checkedFlag = false)
				} else {
					this.cartList.forEach(item => item.checkedFlag = true)
				}
			},
			// 数量点击
			numClick(type, index, id, num) {
				if (type) {
					this.$u.throttle(() => this.addGoods(index, id, num), 500)
				} else {
					this.$u.throttle(() => this.reduceGoods(index, id, num), 500)
				}
			},
			// 按钮点击
			btnClick() {
				let arr = this.cartList.filter(item => item.checkedFlag === true)
				let subStr = arr.map(item => item.id).join(',')
				// console.log(subStr);
				// console.log(arr)
				if (arr.length === 0) {
					this.$u.toast('至少选中一件商品')
				} else {
					//按钮状态 true结算 flase删除
					if (this.btnState) {
						//这里 type 1=4 是相同的下单页面
						uni.navigateTo({
							url: `/subPages/order/order?flag=${false}&type=${1}&cardIds=${subStr}`
						})
					} else {
						// 打开弹出层
						this.popupShow = true

					}
				}
			},
			// 弹出层回调
			callback() {
				let arr = this.cartList.filter(item => item.checkedFlag === true)
				let subStr = arr.map(item => item.id).join(',')
				this.delGoods(subStr)
			},
			// 添加数量操作
			async addGoods(index, id, num) {
				// console.log(index, id, num);
				let {
					code
				} = await this.$api.addGoods({
					cart_id: id, //购物车ID
					num: ++num
				})
				if (code === 1) this.cartList[index].num++
				// console.log(res);
			},
			// 减少数量操作
			async reduceGoods(index, id, num) {
				if (num > 1) {
					let {
						code
					} = await this.$api.reduceGoods({
						cart_id: id, //购物车ID
						num: --num
					})
					if (code === 1) this.cartList[index].num--
				} else {
					this.$u.toast('数量最少为1')
				}
			},
			// 删除购物车
			async delGoods(cart_ids) {
				let {
					cdoe,
					msg
				} = await this.$api.delGoods({
					cart_ids
				})
				this.$u.toast(msg)
				this.popupShow = false
				setTimeout(() => {
					this.btnState = true
					this.getCartList()
				}, 1500)
				// console.log(res);
			},
			// 购物车列表
			async getCartList() {
				let res = await this.$api.getCartList()
				res.data.forEach(item => this.$set(item, "checkedFlag", false))
				this.cartList = res.data
				// console.log(res);
			}
		}
	}
</script>

<style>
	page {
		box-sizing: border-box;
		padding: 0 24rpx 150rpx;
	}
</style>
<style lang="scss" scoped>
	.topBox {
		box-sizing: border-box;

		.mainBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 24rpx !important;

			&-left {
				color: rgba(0, 0, 0, 0.8);
				font-size: 24rpx;
				font-weight: 400;
			}

			&-right {
				color: $textColor;
				font-size: 28rpx;
				font-weight: 400;
			}
		}
	}

	.topBox::before {
		z-index: -9;
		content: "";
		position: absolute;
		width: 447rpx;
		height: 253rpx;
		border-bottom-left-radius: 100rpx;
		background-color: #D4C6FF;
		filter: blur(24px);
		right: 0;
		top: 0;
	}

	.topBox::after {
		z-index: -10;
		content: "";
		position: absolute;
		width: 400rpx;
		height: 358rpx;
		border-bottom-right-radius: 286rpx;
		background-color: #F8D5F6;
		filter: blur(25px);
		top: 0;
		left: 0;
	}

	.goodItem {
		display: flex;
		justify-content: space-between;
		align-items: center;


		.change {
			width: 36rpx;
			height: 36rpx;
		}

		.itemMain {
			margin-left: 22rpx;
			flex: 1;
			display: flex;


			&-left {
				width: 195rpx;
				height: 195rpx;
				border-radius: 24rpx;
			}

			&-right {
				flex: 1;
				margin-left: 16rpx;

				.name {
					color: rgba(0, 0, 0, 0.8);
					font-size: 26rpx;
					font-weight: 500;
				}

				.nacPrice {
					margin: 8rpx 0;
					color: rgba(0, 0, 0, 0.4);
					font-size: 22rpx;
					font-weight: 400;
				}

				.price {
					margin-top: 18rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: $priceText;
					font-size: 40rpx;
					font-weight: 500;

					.numberRight {
						text {
							margin: 0 4rpx;
							display: inline-block;
							width: 56rpx;
							height: 56rpx;
							line-height: 56rpx;
							background: rgba(245, 245, 245, 1);
							color: rgba(51, 51, 51, 1);
							font-size: 28rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.fixedBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 96rpx;
		opacity: 1;
		background: #fff;
		border-bottom: 1rpx solid #EEEFF0;
		border-top: 1rpx solid #EEEFF0;
		box-sizing: border-box;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-left {
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			color: rgba(100, 101, 102, 1);
			font-size: 26rpx;
			font-weight: 400;
		}

		&-center {
			flex: 1;
			color: $priceText;
			font-size: 36rpx;
			font-weight: 600;
			text-align: right;
		}

		&-right {
			margin-left: 12rpx;
			width: 236rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 80rpx;
			opacity: 1;
			background: radial-gradient(235.8% 163.9% at 132.1% 0%, rgba(255, 245, 252, 1) 0%, rgba(208, 132, 255, 1) 23%, rgba(121, 101, 255, 1) 56.99999999999999%, rgba(131, 111, 255, 1) 82%, rgba(130, 111, 255, 1) 100%);

			text-align: center;
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			font-weight: 600;
		}

		.remove {
			background: rgba(252, 67, 56, 1) !important;
		}
	}


	.emptyBox {
		width: 620rpx;
		height: 332rpx;
		opacity: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>